<template>
	<view class="re-search flex-row flex-center radius-xs">
		<view class="bar-item"  @click="chooseBar()" >
			<picker class="bar-picker" @change="bindPickerChange" :value="index" :range="array">
				<view class="uni-input">{{array[index]}}</view>
			</picker>
			<text class="fa fa-angle-down margin-left-xs"></text>
		</view>
		<input type="text" v-model="key_word" ref="key_word" placeholder="请输入搜索内容"
		 confirm-type="search" @confirm="searchResult" />
		<text class="fa fa-search text-xl"></text>
	</view>
</template>

<script>
	export default {
		name: 'searchBar',
		data() {
			return {
				key_word: '',
				array: ['上海市', '深圳市', '广州市', '北京市'],
				index: 0,
			};
		},
		methods: {
			searchResult:function() {
				this.$emit('searchClick');
			},
			chooseBar() {
				
			},
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.target.value)
				this.index = e.target.value
			},
		}
	}
</script>

<style>
	.re-search {
		width: 94vw;
		height: 72rpx;
		background-color: #f1f2f6;
	}
	
	.re-search input {
		width: 86%;
		margin-left: 20rpx;
		font-size: 15px;
	}

	.bar-item {
		width: 150rpx;
	}

	.text-xl {
		padding-right: 25rpx;
	}
	.bar-picker{
		display: inline-block;
	}
</style>
